<%--
  Created by IntelliJ IDEA.
  User: wwh
  Date: 2017/7/27
  Time: 12:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生实习日志列表</title>
    <script type="text/javascript" src="../../static/common/ckeditor/ckeditor.js"></script>
    <link rel="stylesheet" href="/static/common/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/global.css">
    <link rel="stylesheet" href="/static/css/table.css">
</head>
<body>
<div style="margin: 15px;">
    <div v-show="show" id="Vue" v-cloak>
        <blockquote class="layui-elem-quote" style="overflow: hidden">
                <a href="#" class="layui-btn layui-btn-small" @click="reloadToStudentList">
                    <i class="layui-icon"></i>返回
                </a>
            <div style="float: right;">
                <input type="text" id="searchVal">
                <a href="javascript:;" class="layui-btn layui-btn-small">
                    <i class="layui-icon">&#xe615;</i> 查询
                </a>
            </div>
        </blockquote>
        <fieldset class="layui-elem-field">
            <legend><span>{{studentDetail.department.name}}</span>-<spans>{{studentDetail.clazz.name}}</spans>-<span>{{ studentDetail.user.realname }}</span>的日志</legend>
            <div class="layui-field-box layui-form">
                <table class="layui-table admin-table">
                    <thead>
                    <tr>
                        <td style="width: 30px">序号</td>
                        <td>实习单位</td>
                        <td>撰写日期</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <%--内容容器--%>
                    <tbody id="content">
                    </tbody>
                </table>
            </div>
        </fieldset>
        <%--分页容器--%>
        <div class="admin-table-page">
            <div id="paged" class="page">
            </div>
        </div>
    </div st v-cl v->

    <div style="display: none" id="show_edit">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>内容</legend>
        </fieldset>
        <form id="form" class="layui-form" action="" method="post" style="width: 800px;">
            <div class="layui-form-item">
                <label class="layui-form-label">用人单位</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="orgInfoFullName" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">撰写日期</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="date" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">日志内容</label>
                <div style="margin-left: 110px;">
                    <div name="content" class="layui-textarea"  style="overflow:auto;height: 100px;width:400px;" disabled id="internLogContent"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">教师评价</label>
                <div class="layui-input-inline" id="detail" style="display: none">
                    <div name="appraise" class="layui-textarea"  style="overflow:auto;height: 100px;width:400px;"disabled="disabled" id="appraise"></div>
                    <div class="layui-input-block" style="margin-top: 20px">
                        <button class="layui-btn" lay-filter="reload">返回</button>
                    </div>
                </div>
                <div class="layui-input-block" id="edit" style="display: none">
                    <textarea id="ta_ckeditor" class="ckeditor my-math" cols="20" rows="2" style="overflow:auto"></textarea>
                    <script type="text/javascript">CKEDITOR.replace('ta_ckeditor');</script>
                    <div class="layui-input-block" style="margin-top: 20px">
                        <input type="button" class="layui-btn" lay-filter="save" value="提交评价" lay-submit>
                        <button class="layui-btn" lay-filter="reload">返回</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!--模板-->
<script type="text/html" id="tpl">
    {{# layui.each(d.data,function(index,item){ }}
    <tr>
        <td>{{ index+1 }}</td>
        <td>
            {{# if(item.orgInfo!=null){ }}
            {{ item.orgInfo.fullname||"-" }}
            {{# }; }}
        </td>
        <td>{{ getYearMonthDate(item.internLog.date)||"-" }}</td>
        <td>
            <a href="javascript:;" data-id="{{ item.internLog.id }}" data-opt="detail"
                class="layui-btn layui-btn-normal layui-btn-mini">详情</a>

            {{# if(item.internLog.advisorappraise == ''){ }}
            <a href="javascript:;" data-id="{{ item.internLog.id }}" data-opt="appraise"
                class="layui-btn layui-btn-mini">评价</a>
            {{# };}}
        </td>
    </tr>
    {{# }); }}
</script>
<script src="/static/common/axios.min.js"></script>
<script src="/static/common/vue.min.js"></script>
<script src="/static/common/layui/layui.js"></script>
<script>
    var teacherUserId = ${sessionScope.currentUser.getId()};
    var studentUserId = <%=request.getParameter("studentUserId")%>;
//    console.log(studentUserId);
</script>
<script type="text/javascript">
    /**
     * 时间格式取年月日
     * @param time
     * @returns {*}
     */
    function getYearMonthDate(time) {
        if(time!=null) {
            var YMD = time.split(" ")[0];  // 年月日
            var HMS = time.split(" ")[1];  // 时分秒
            return YMD;
        }
        return null;
    }
    layui.config({
        base: '../../static/js/'
    });
    layui.use(['paging', 'form','laytpl','layedit'],function () {
        var $ = layui.jquery,
            paging = layui.paging(),
            layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
            layer = layui.layer, //获取当前窗口的layer对象
            laytpl = layui.laytpl,
            form = layui.form();
        var layedit = layui.layedit;
        //构建一个默认的编辑器
        var index = layedit.build('LAY_demo1');
        var vm = new Vue({
            el:"#Vue",
            data:{
                show:true
                , user:{
                    id:teacherUserId
                }
                , internLog:{
                    date:{}
                }
                , orgInfo:{}
                , studentDetail:{
                    department:{},
                    clazz:{},
                    user:{},
                    studentInfo:{}
                }
            },
            methods:{
                search:function () {
                },
                reloadToStudentList:function () {
                    location.href='/teacher/internLists';
                }
            }
        });

        // 得到当前studentUserId的信息
        axios.get('/student/findDetail/'+studentUserId)
            .then(function (response) {
                console.log(response.data);
                vm.studentDetail = response.data.data;
            })
            .catch(function (response) {
                console.log(response);
            })

        paging.init({
            openWait:true,
            url:'/internlog/findByCondition',
            elem:'#content',
            params:{
                composerid:studentUserId
            },
            contentType: "application/json; charset=utf-8",
            type:"POST",
            tempElem:'#tpl',
            pageConfig:{
                elem:'#paged',
                pageSize:5
            },
            success:function (response) {
//                alert('渲染成功');
//                console.log(response);
            },
            fail:function (response) {
//                alert('获取数据失败');
//                console.log(response);
            },
            complate:function () {
//                alert('回调成功');
                // 绑定按钮
                $('#content').children('tr').each(function () {
                    // 获取每行记录的id值
                    var $that = $(this).children('td:last-child');
                    var id = $that.children('a[data-opt=detail]').data('id');

//                    console.log(id);
                    // 详情按钮
                    $that.children('a[data-opt=detail]').on('click',function () {
                        axios.get('/internlog/findById/'+id)
                            .then(function (response) {
                                console.log(response.data);
                                vm.internLog = response.data.data.internLog;
                                vm.orgInfo = response.data.data.orgInfo;
                                $('form input[name=orgInfoFullName]').val(vm.orgInfo.fullname);   // 用人单位
                                $('form input[name=date]').val(getYearMonthDate(vm.internLog.date));  // 撰写日期
                                $('#internLogContent').text('');
                                $('#internLogContent').html(vm.internLog.content);   // 日志内容
                                $('#appraise').text('');
                                $('#appraise').html(vm.internLog.advisorappraise);   // 教师评价
                                $('#show_edit').show();
                                $('#detail').show();
                                vm.show = false;
                            })
                            .catch(function (response) {
                                console.log(response);
                            })
                    });

                    // 评价按钮
                    $that.children('a[data-opt=appraise]').on('click',function () {
                        axios.get('/internlog/findById/'+id)
                            .then(function (response) {
                                console.log(response.data);
                                $('#form input[value="提交评价"]').show();
                                $('#appraise').attr("readOnly", false).removeClass("disabled");
                                vm.internLog = response.data.data.internLog;
                                vm.orgInfo = response.data.data.orgInfo;
                                $('form input[name=orgInfoFullName]').val(vm.orgInfo.fullname);   // 用人单位
                                $('form input[name=date]').val(getYearMonthDate(vm.internLog.date));  // 撰写日期
                                $('#internLogContent').text('');
                                $('#internLogContent').html(vm.internLog.content);   // 日志内容
                                $('#show_edit').show();
                                $('#edit').show();
                                vm.show = false;
                            })
                            .catch(function (response) {
                                console.log(response);
                            })

                    });

                });
            }
        });

        form.on('submit(save)',function () {
            var url = "/internlog/modify";
            vm.internLog.advisorappraise = CKEDITOR.instances.ta_ckeditor.getData();
            vm.internLog.date = vm.internLog.date.time;
            console.log(vm.internLog.advisorappraise);
            axios.post(url,vm.internLog)
                .then(function (response) {
                    if(response.data.success){
                        layer.msg('评价成功', {icon: 1, time: 1000});
                        paging.get();
                        vm.show = true;
                        $('#detail').hide();
                        $('#edit').hide();
                        $('#show_edit').hide();
                    }
                })
                .catch(function (response) {
                    console.log(response);
                })
            return false;
        });
        form.on('button(reload)',function () {
            vm.show = true;
            $('#detail').hide();
            $('#edit').hide();
            $('#show_edit').hide();
        });
    });
</script>
</body>
</html>
